<template>
	<view class="comon-res">
		<view class="inner-wrap">
			<view class="res-title">{{title}}</view>
			<image class="res-icon mt-20" src="/static/other/pay-success.png"></image>
			<view class="res-desc mt-20">
				<view>{{desc}}</view>
				<view class="mt-8" v-if="desc2">{{desc2}}</view>
			</view>
			
			<view class="split-line mt-20"></view>
			<view class="res-tips mt-20">
				<view class="">如果您有问题，请到"我的"页面上联系在线客服，或者直接给我们留言哦</view>
				<!-- <view class="gray">客服微信：1234556</view>
				<view class="gray">客户电话：12344556</view> -->
				<view class="gray">在线时间：9:00-17:30</view>
				<!-- <view class="">如果不方便添加客服，也可以给我们留言哦</view> -->
			</view>
			<view v-if="btns" class="res-btns mt-20">
				<slot name="btns">
					<view class="btn-double">
						<view class="custom-button full-button gray-btn" @tap="onQuestion">
							<u-button shape="circle" text="问题留言"></u-button>
						</view>
						<view v-if="!hideOrderBtn" class="custom-button full-button" @tap="onViewOrder">
							<u-button type="primary" shape="circle" text="查看订单"></u-button>
						</view>
					</view>
				</slot>

			</view>
		</view>

	</view>


</template>

<script setup>
	import {
		ref,
		reactive,
		defineProps,
		defineEmits,
	} from "vue";

	const props = defineProps({
		title: {
			type: String,
			default: '',
		},
		desc: {
			type: String,
			default: '',
		},
		desc2: {
			type: String,
			default: '',
		},
		btns: {
			type: Boolean,
			default: true,
		},
		hideOrderBtn: {
			type: Boolean,
			default: false,
		},
		orderPath: {
			type: String,
			default: '/pages/my/printingOrders',
		},
	})


	const onQuestion = () => {
		uni.navigateTo({
			url: '/pages/my/questionMessage'
		})
	}
	const onViewOrder = () => {
		uni.navigateTo({
			url: props.orderPath,
		})
	}
</script>

<style lang="scss" scoped>
	.comon-res {
		box-sizing: border-box;
		background: rgba(245, 245, 245, 1);
		padding: 20px 16px;
		min-height: 100vh;
		
		.inner-wrap {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 16px;
			border-radius: 8px;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.02);
		}

		.res-icon {
			width: 60px;
			height: 60px;
		}

		.res-desc {
			font-size: 16px;
			font-weight: 700;
			line-height: 24px;
			color: rgba(56, 56, 56, 1);
			text-align: center;
		}

		.res-tips {
			display: flex;
			flex-direction: column;
			gap: 10px;
			text-align: center;
			/** 文本1 */
			font-size: 14px;
			font-weight: 400;
			line-height: 20px;
			color: rgba(56, 56, 56, 1);

			.gray {
				color: rgba(166, 166, 166, 1);

			}
		}

		.res-btns {
			width: 100%;
		}
	}
</style>